<template>
  <div :class="$style.orangemodal">
    <div :class="$style.orangeTip" v-if="accountType == 0">
      <img :class="$style.tipIcon" src="/jinggao.png" alt="" />
      <div :class="$style.tipText">真实账户禁用该功能</div>
    </div>
    <div :class="[$style.orangeBtn,accountType==0?$style.orangeBtnDisable:'']" @click="resetAccount">
      <img :class="$style.btnIcon" alt="" src="/monizhanghuchongzhibai.png" />
      <div :class="$style.btnText">模拟账户重置</div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "OrangeModal",
  data() {
    return {
      accountType: 0,
    };
  },
  methods: {
    resetAccount() {
      if(this.accountType==0){
        return;
      }
      this.$layer.confirm('确认重置吗？', {
        title: '模拟账户重置',
        btn: [{
          text: '确认',
          callback: (id) => {
            this.$layer.close(id);
            
          }
        },
        {
          text: '取消',
          callback: (id) => {
            this.$layer.close(id);
          }
        }]
      })
    },
  },
});
</script>
<style module>
.orangemodal {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
}

.orangeTip {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background-color: #FFF8E6;
  box-sizing: border-box;
  border: 1px solid #FFBA00;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.tipIcon {
  width: 20px;
  height: 20px;
}

.tipText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 250;
  color: #FFBA00;
  margin-left: 5px;
}

.orangeBtn {
  width: 385px;
  height: 42px;
  border-radius: 2px;
  background: #FF4D4F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
}

.orangeBtnDisable{
  opacity: 0.5;
  cursor: default;
}

.btnIcon {
  width: 16px;
  height: 16px;
}

.btnText {
  text-decoration: none;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: var(--color-white);
  margin-left: 10px;
}
</style>